@red-color: #E51C23;
@red-hover-color: #e56262;
@main-color: #000000;
@secondary-color: #666666;
@tip-color: #999999;
@border-color: #F9F9F9;
@border-dark-color: #888888;
@border-light-color: #EAEAEA;
@bg-hover-color: #f9f9f9;
@bg-color: #EAEAEA;
@blue-color: #537DC8;
@blue-hover-color: #5e8de1;
@yellow-color: #FF9800;
@green-color: #259B24;

// 公共样式
.danger-bg {
	background: @red-color;
	color: #fff;
	&:hover {
		background: @red-hover-color;
		color: #fff;
	}
}
.normal-bg {
	background: @blue-color;
	color: #fff;
}
.layui-btn {
	border-radius: 4px;
}
.layui-form-radio > i:hover,
.layui-form-radioed > i {
	color: @red-color;
}
.layui-form-radio * {
	color: @secondary-color;
}
.layui-laypage a:hover {
	color: @red-color;
}
.layui-layer-btn .layui-layer-btn0 {
	border-color: #dedede !important;
	background-color: #fff !important;
	color: #333 !important;
}
.layui-layer-btn .layui-layer-btn1 {
	border: 1px solid @red-color;
	background-color: @red-color;
	color: #fff;
}
// 加载
.loading-icon{
	width: 20px;
	height: 20px;
}
.loading-icon svg {
            fill: #a0a0a0;
            width: 20px;
            height: 20px;
        }
.loading-icon svg rect {
            x: 47.5;
            y: 41;
            rx: 3;
            ry: 3;
            width: 5px;
            height: 18px;
        }

// 页面样式
.login-wrapper {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url('../img/douzhi-back.jpg') no-repeat top center;
	background-size: cover;
	.login-modal {
		padding: 46px;
		position: absolute;
		top: 50%;
		left: 10%;
		width: 240px;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		transform: translate(0, -50%);
		border-radius: 4px;
		.layui-form {
			width: auto;
			height: auto;
			.gmmc-logo {
				width: 200px;
				margin-bottom: 20px;
			}
			.account-input,
			.psw-input {
				width: 100%;
				height: 36px;
				border-bottom: 1px solid @border-color;
				font-size: 12px;
				color: @main-color;
				margin-top: 15px;
			}
			.login-btn {
				width: 100%;
				height: 34px;
				line-height: 34px;
				text-align: center;
				border-radius: 4px;
				color: #fff;
				background: @red-color;
				margin-top: 40px;
			}
			.layui-input {
				border: none;
				padding-left: 0;
				border-bottom: 1px solid @border-color;
				font-size: 12px;
			}
		}
	}
}

// 公共头部
.header-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 74px;
	line-height: 74px;
	background: #fff;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #e0e0e0;
	.gmmc-logo {
		width: 200px;
		flex: 0 0 200px;
		margin-left: 20px;
	}
	.right {
		flex: 1;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.nickname {
			font-size: 15px;
			color: @main-color;
			margin-right: 10px;
			line-height: 1;
		}
		.edit-psw,
		.quit-login {
			width: 76px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border-radius: 4px;
			color: #fff;
			font-size: 14px;
			background: @red-color;
			margin-right: 10px;
			cursor: pointer;
			&:hover {
				background: @red-hover-color;
			}
		}
		.quit-login {
			margin-right: 30px;
		}
	}
}

// 公共导航
.nav-wrapper {
	width: 180px;
	position: absolute;
	top: 75px;
	left: 0;
	bottom: 0;
	border-right: 1px solid #e0e0e0;
	.nav-list {
		display: flex;
		flex-direction: column;
		margin: 10px 0 20px 0;
		.nav-item {
			padding: 10px 0;
			padding-left: 20px;
			cursor: pointer;
			a {
				display: flex;
				align-items: center;
				text-decoration: none;
				.iconfont {
					font-size: 2.375rem;
					color: @secondary-color;
				}
				.icon-addresslist {
					font-size: 2.5rem;
					margin-left: -2px;
				}
				.icon-tradingdata {
					margin-left: 1px;
				}
				.nav-text {
					font-size: 1.375rem;
					color: @secondary-color;
					margin-left: 10px;
				}
			}
			&.active {
				a {
					.iconfont,
					.nav-text {
						color: @red-color;
						font-weight: 500;
					}
				}
			}
			&:hover {
				background: #f9f9f9;
			}
		}
	}
}

.iframe-wrapper {
	position: absolute;
	top: 74px;
	bottom: 0;
	left: 180px;
	right: 0;
}
#editPswModal {
	.modal-body {
		max-height: 400px;
		overflow-y: auto;
		.layui-form {
			.layui-form-item {
				display: flex;
				.layui-form-label {
					width: auto;
					flex: 0 0 auto;
					padding-left: 0;
				}
				.layui-input-block {
					flex: 1;
					margin-left: 0px;
				}
			}
		}
	}
}
.chat-room-wrapper {
	.left-wrapper {
		position: absolute;
		right: 213px;
		left: 0;
		top: 0;
		bottom: 0;
		height: 100%;
		&.blank-wrapper {
			background: @bg-color;
			.tips-chat-text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 16px;
				color: @secondary-color;
			}
		}
		.group-name-wrapper {
			font-size: 18px;
			color: @main-color;
			height: 49px;
			line-height: 49px;
			border-bottom: 1px solid @border-light-color;
			padding: 0 20px;
		}
		.group-chat-content {
			padding: 20px;
			background: @bg-color;
			position: absolute;
			top: 50px;
			bottom: 160px;
			left: 0;
			right: 0;
			overflow-y: auto;
			.atTipWrapper{
				position: fixed;
				right: 230px;
				top: 70px;
				background: #fff;
				color: @green-color;
				z-index: 20;
				padding: 5px 15px;
				box-shadow: 0 2px 10px #ccc;
				border-radius: 40px;
				cursor: pointer;
				.text{
					font-size: 13px;
				}
			}
			.loadmore{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 5px;
				.loading-text{
					font-size: 12px;
					color: #999;
					line-height: 1;
					margin-left: 5px;
				}
			}
			.date {
				font-size: 14px;
				color: @tip-color;
				text-align: center;
			}
			.left-chatmodel {
				display: flex;
				align-items: flex-start;
				margin-top: 15px;
				.avatar {
					width: 40px;
					flex: 0 0 40px;
					height: 40px;
					border-radius: 4px;
				}
				.chat-content {
					flex: 1;
					min-width: 0;
					display: flex;
					flex-direction: column;
					.username {
						color: @secondary-color;
						font-size: 13px;
						margin-left: 10px;
					}
					.send-content-wrapper {
						display: flex;
						align-items: center;
						margin-top: 8px;
						.read-text {
							display: inline-block;
							width: 100px;
							flex: 0 0 100px;
							text-align: left;
							font-size: 13px;
							color: @secondary-color;
							margin-left: 10px;
						}
						.text-content {
							max-width: calc(100% - 400px);
							padding: 8px 10px;
							line-height: 19px;
							color: @main-color;
							border-radius: 4px;
							font-size: 14px;
							background: #fff;
							margin-left: 10px;
						}
						.chat-img {
							max-width: 40%;
							border-radius: 4px;
							margin-left: 10px;
						}
						.unread-text {
							display: inline-block;
							width: 100px;
							flex: 0 0 100px;
							text-align: left;
							font-size: 13px;
							color: @blue-color;
							margin-left: 10px;
						}
					}
				}
			}
			.right-chatmodel {
				display: flex;
				align-items: flex-start;
				margin-top: 15px;
				.avatar {
					width: 40px;
					flex: 0 0 40px;
					height: 40px;
					border-radius: 4px;
				}
				.chat-content {
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					.read-text {
						display: inline-block;
						width: 100px;
						flex: 0 0 100px;
						text-align: right;
						font-size: 13px;
						color: @secondary-color;
						margin-right: 10px;
					}
					.text-content {
						max-width: calc(100% - 28% - 100px);
						padding: 8px 10px;
						line-height: 19px;
						color: #fff;
						border-radius: 4px;
						font-size: 14px;
						background: @red-color;
						margin-right: 10px;
					}
					.chat-img {
						max-width: 40%;
						border-radius: 4px;
						margin-right: 10px;
					}
					.unread-text {
						display: inline-block;
						width: 100px;
						flex: 0 0 100px;
						text-align: right;
						font-size: 13px;
						color: @blue-color;
						margin-right: 10px;
					}
				}
			}
		}
		.edit-message-wrapper {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 160px;
			.tool-wrapper {
				padding: 4px 15px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid @border-light-color;
				.at-wrapper{
					width: 28px;
					.at-text{
						color: @red-color;
						font-size: 20px;
						cursor: pointer;
						&:hover{
							color: @red-hover-color;
						}
					}
				}
				.upload-image-wrapper {
					width: 28px;
					position: relative;
					overflow: hidden;
					.icon-faimlyalbum {
						color: @red-color;
						font-size: 28px;
					}
					#upload-image-input {
						position: absolute;
						left: 0;
						top: 0;
						width: 28px;
						height: 100%;
						opacity: 0;
					}
				}
			}
			.write-wrapper {
				width: 100%;
				padding: 5px 15px;
				#write-textarea {
					width: 100%;
					resize: none;
				}
			}
			.btn-wrapper {
				display: flex;
				justify-content: flex-end;
				.send-btn {
					padding: 5px 15px;
					text-align: center;
					color: #fff;
					background: @red-color;
					font-size: 12px;
					border-radius: 4px;
					margin: 0px 15px 10px 0;
					cursor: pointer;
					&:hover {
						background: @red-hover-color;
					}
				}
			}
		}
	}
	.right-wrapper {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 212px;
		border-left: 1px solid @border-light-color;
		overflow-y: auto;
		height: 100%;
		.search-wrapper {
			display: flex;
			align-items: center;
			padding: 0 10px;
			height: 40px;
			line-height: 40px;
			border-bottom: 1px solid @border-light-color;
			.icon-search {
				font-size: 20px;
				width: 20px;
				flex: 0 0 20px;
				color: #c8c8c8;
			}
			.search-input {
				flex: 1;
				min-width: 0;
				height: 38px;
				padding: 0;
				margin-left: 5px;
				font-size: 13px;
			}
		}
		.group-list-wrapper {
			.read-groupwrapper,
			.unread-groupwrapper {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 15px;
				cursor: pointer;
				border-bottom: 1px solid @border-color;
				.iconfont {
					color: @tip-color;
					font-size: 16px;
					transition: all 0.3s ease;
				}
				.unread {
					color: @blue-color;
					font-size: 14px;
					display: flex;
					align-items: center;
					.tipdot-num {
						display: inline-block;
						width: 16px;
						height: 16px;
						text-align: center;
						line-height: 16px;
						border-radius: 50%;
						font-size: 12px;
						background: @red-color;
						color: #fff;
						margin-left: 5px;
						.num {
							display: inline-block;
							transform: scale(0.8);
						}
					}
				}
				.read {
					color: @main-color;
					font-size: 14px;
				}
				&.opened {
					.iconfont {
						transform: rotate(90deg);
						transition: all 0.3s ease;
					}
				}
			}
			.group-list {
				display: flex;
				flex-direction: column;
				.group-item {
					padding: 15px 0;
					color: @tip-color;
					font-size: 14px;
					border-bottom: 1px solid @border-light-color;
					cursor: pointer;
					padding-left: 15px;
					position: relative;
					&:hover {
						background: @bg-hover-color;
					}
					&.active {
						.group-name {
							color: @main-color;
							font-weight: 600;
						}
						&::after {
							display: inline-block;
							content: '';
							width: 4px;
							height: 100%;
							background: @red-color;
							position: absolute;
							right: 0;
							top: 0;
						}
					}
					.group-name {
						font-size: 14px;
						color: @secondary-color;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.group-last-message {
						color: @tip-color;
						font-size: 12px;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-top: 8px;
						.mes-num {
							margin-right: 2px;
						}
						.at-tip {
							margin-right: 2px;
							color: @red-color;
						}
					}
				}
			}
		}
	}
}

.group-message-model,
.groupmes-manager-model {
	.screening-wrapper {
		margin: 20px;
		.layui-form {
			display: flex;
			align-items: center;
			.layui-form-item {
				margin-bottom: 0;
				display: flex;
				align-items: center;
				margin-left: 15px;
				&:first-child {
					margin-left: 0;
				}
				.layui-form-label {
					width: auto;
					padding-left: 0;
				}
				.layui-input-block {
					margin-left: 0px;
					&.title-input {
						width: 188px;
					}
				}
			}
			.layui-btn {
				margin-left: 15px;
				background: @red-color;
				border-radius: 4px;
			}
		}
	}
	.operation-btn-wrapper {
		margin: 0 20px 20px 20px;
		display: flex;
		align-items: center;
	}
	.table-wrapper {
		margin: 0 20px 20px 20px;
		#messageListPaging {
			display: flex;
			justify-content: flex-end;
		}
		.layui-table {
			tbody {
				tr {
					.success {
						color: @green-color;
					}
					.fail {
						color: @red-color;
					}
					.error {
						color: @yellow-color;
					}
					.cancel,
					.watch,
					.sendRecord {
						cursor: pointer;
						display: inline-block;
						padding: 0 3px;
					}
					.cancel {
						color: @secondary-color;
						&:hover {
							color: #333;
						}
					}
					.watch,
					.sendRecord {
						color: @blue-color;
						&:hover {
							color: @blue-hover-color;
						}
					}
				}
			}
		}
	}
}
.groupmes-manager-model {
	#groupMes-table {
		.edit {
			cursor: pointer;
			color: @blue-color;
			&:hover {
				color: @blue-hover-color;
			}
		}
		.delete {
			cursor: pointer;
			color: @red-color;
			&:hover {
				color: @red-hover-color;
			}
		}
		.images {
			.upload-img {
				width: 48px;
				margin-left: 2px;
			}
		}
	}
}
#addModal,
#editModal {
	.modal-body {
		height: 400px;
		overflow-y: auto;
		.layui-form-item {
			display: flex;
			&.upload-img-item {
				justify-content: flex-start;
				.layui-form-label {
					padding-top: 0;
				}
			}
			.layui-form-label {
				width: auto;
				flex: 0 0 auto;
				padding-left: 0;
			}
			.layui-input-block {
				flex: 1;
				margin-left: 0px;
				.variable-wrapper {
					display: flex;
					align-items: center;
					margin: 10px 0 0 0;
					.variable-text {
						width: auto;
						flex: 0 0 auto;
						font-size: 0.875rem;
						color: @main-color;
					}
					.variable-itemlist {
						flex: 1;
						min-width: 0;
						display: flex;
						align-items: center;
						.item {
							padding: 3px 6px;
							color: #fff;
							background: @red-color;
							border-radius: 4px;
							margin-right: 5px;
							font-size: 0.75rem;
							cursor: pointer;
							&:hover {
								background: @red-hover-color;
							}
						}
					}
				}
				#variable-textarea,
				#editVariable-textarea {
					width: 100%;
					height: 100px;
					resize: none;
					color: @main-color;
					font-size: 0.8125rem;
					margin: 10px 0;
					border: 1px solid @border-light-color;
					padding: 5px;
				}
				.upload-btn {
					width: 80px;
					text-align: center;
					padding: 6px;
					color: @secondary-color;
					font-size: 0.8125rem;
					border-radius: 4px;
					border: 1px solid @border-light-color;
					margin-bottom: 10px;
					cursor: pointer;
					position: relative;
					#addImage_input,#editImage_input {
						position: absolute;
						top: 0;
						left: 0;
						width: 80px;
						bottom: 0;
						opacity: 0;
					}
					&:hover {
						background: #e6e6e6;
						color: @main-color;
						border-color: #ccc;
					}
				}
				.tips {
					color: @tip-color;
					font-size: 0.75rem;
				}
				.upload-img-wrapper {
					display: flex;
					flex-wrap: wrap;
					.imgItem {
						width: 4.375rem;
						height: 4.375rem;
						position: relative;
						border-radius: 4px;
						margin-right: 10px;
						.upload-img {
							width: 4.375rem;
							height: 4.375rem;
							border-radius: 4px;
						}
						.iconfont {
							line-height: 1;
							font-size: 18px;
							width: 18px;
							height: 18px;
							color: @red-color;
							position: absolute;
							right: -9px;
							top: -9px;
							z-index: 10;
							cursor: pointer;
							&:hover {
								color: @red-hover-color;
							}
						}
					}
				}
				.excel-wrapper {
					margin-top: 10px;
					display: flex;
					align-items: center;
					.layui-btn {
						height: 32px;
						line-height: 32px;
						font-size: 0.75rem;
						padding: 0 10px;
						position: relative;
						#import_excel_btn {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 32px;
							opacity: 0;
						}
					}
					.excel-text {
						margin-left: 10px;
						color: @blue-color;
						font-size: 0.75rem;
						cursor: pointer;
						line-height: 1;
					}
				}
				.time-wrapper {
					margin-top: 10px;
				}
			}
		}
	}
}
#watchModal {
	.modal-body {
		height: 400px;
		overflow-y: auto;
		.layui-form {
			.layui-form-item {
				display: flex;
				&.upload-img-item {
					justify-content: flex-start;
					.layui-form-label {
						padding-top: 0;
					}
				}
				.layui-form-label {
					width: auto;
					flex: 0 0 auto;
					padding-left: 0;
				}
				.layui-input-block {
					flex: 1;
					margin-left: 0px;
					#variable-value {
						width: 100%;
						height: 100px;
						resize: none;
						color: @main-color;
						font-size: 0.8125rem;
						margin: 10px 0;
						border: 1px solid @border-light-color;
						padding: 5px;
						font-size: 1rem;
					}
					.upload-btn {
						width: 80px;
						text-align: center;
						padding: 6px;
						color: @secondary-color;
						font-size: 0.8125rem;
						border-radius: 4px;
						border: 1px solid @border-light-color;
						margin-bottom: 10px;
						cursor: pointer;
						&:hover {
							background: #e6e6e6;
							color: @main-color;
							border-color: #ccc;
						}
					}
					.tips {
						color: @tip-color;
						font-size: 0.75rem;
					}
					.upload-img-wrapper {
						display: flex;
						flex-wrap: wrap;
						.upload-img {
							width: 4.375rem;
							height: 4.375rem;
							border-radius: 4px;
							margin-right: 10px;
						}
					}
					.excel-wrapper {
						margin-top: 10px;
						display: flex;
						align-items: center;
						font-size: 0.75rem;
						color: @secondary-color;
						.excel-text {
							margin-left: 10px;
							color: @blue-color;
							cursor: pointer;
							line-height: 1;
						}
					}
					.time-wrapper {
						margin-top: 10px;
						font-size: 0.75rem;
						color: @secondary-color;
					}
				}
			}
		}
	}
}
#sendRecordModal {
	.modal-body {
		.process-wrapper {
			display: flex;
			justify-content: space-between;
			.text {
				text-align: center;
				color: @secondary-color;
				font-size: 0.875rem;
				margin-bottom: 0;
			}
			.process {
				width: 30%;
				display: flex;
				flex-direction: column;
				border: 1px solid @border-light-color;
				border-radius: 4px;
				padding: 10px;
				margin-right: 15px;
				.layui-progress {
					margin-top: 20px;
				}
			}
			.send-success,
			.send-fail {
				width: 30%;
				display: flex;
				flex-direction: column;
				align-items: center;
				border: 1px solid @border-light-color;
				border-radius: 4px;
				padding: 10px;
				.num {
					font-size: 2.25rem;
					color: @green-color;
					font-weight: 600;
					&.success {
						color: @green-color;
					}
					&.fail {
						color: @red-color;
					}
				}
			}
		}
		.record-screening-wrapper {
			margin: 15px 0;
			.layui-form {
				display: flex;
				align-items: center;
				.layui-form-item {
					display: flex;
					align-items: center;
					margin-bottom: 0;
					margin-left: 10px;
					&:first-child {
						margin-left: 0;
					}
					.layui-form-label {
						width: auto;
						padding-left: 0;
						white-space: nowrap;
						margin-bottom: 0;
					}
					.layui-input-block {
						width: auto;
						margin-left: 0;
					}
				}
				#record-search-btn {
					margin-left: 10px;
				}
			}
		}
		.record-import-btn {
			height: 32px;
			line-height: 32px;
		}
		.record-table-wrapper {
			.layui-table {
				.success {
					color: @green-color;
				}
				.error {
					color: @yellow-color;
				}
				.fail {
					color: @red-color;
				}
			}
			#paging {
				display: flex;
				justify-content: flex-end;
			}
		}
	}
}
.KPI-model {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	.screening-wrapper {
		margin: 20px;
		.layui-form {
			.detail-back-btn {
				margin-bottom: 15px;
			}
			.part1-screening,
			.part2-screening {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				.layui-form-item {
					display: flex;
					align-items: center;
					margin-bottom: 0;
					margin-left: 10px;
					&:first-child {
						margin-left: 0;
					}
					.layui-form-label {
						width: auto;
						padding-left: 0;
						white-space: nowrap;
						margin-bottom: 0;
					}
					.layui-input-block {
						width: auto;
						margin-left: 0;
						.time-wrapper {
							display: flex;
							align-items: center;
							.center-unit {
								margin: 0 5px;
							}
						}
					}
				}
				.btn-wrapper {
					margin-left: 15px;
				}
			}
			.part2-screening {
				margin-top: 20px;
			}
		}
	}
	.table-wrapper {
		margin: 0 20px;
		display: flex;
		overflow: hidden;
		&.detail-wrapper {
			overflow-x: auto;
			#group-table {
				.FixedColumn {
					&.fixed {
						position: absolute;
						width: 70px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						z-index: 99;
					}
				}
				thead .FixedColumn {
					&.fixed {
						background: #f2f2f2;
					}
				}
				tbody .FixedColumn {
					&.fixed {
						background: #ffff;
					}
				}
			}
		}
		.left-table-wrapper-big {
			width: 120px;
			float: left;
			.table-item {
				width: 100%;
				text-align: center;
				height: 55px;
				line-height: 25px;
				padding-top: 5px;
				border-left: 1px solid @border-light-color;
				border-bottom: 1px solid @border-light-color;
				&.table-item-head {
					height: 60px;
					line-height: 60px;
					padding-top: 0;
					background: @bg-color;
					border-top: 1px solid @border-light-color;
					.detail-btn {
						cursor: pointer;
						color: @blue-color;
						&:hover {
							color: @blue-hover-color;
						}
					}
				}
			}
		}
		.right-table-wrapper-big {
			display: flex;
			flex: 1;
			min-width: 0;
			overflow-x: auto;
			float: left;
			.right-table-wrapper {
				display: flex;
				flex-direction: column;
				border-top: 1px solid @border-light-color;
				&:first-child {
					.table-item {
						border-left: 1px solid @border-light-color;
					}
				}
				.table-item {
					width: 120px;
					text-align: center;
					height: 60px;
					line-height: 60px;
					display: flex;
					flex-direction: column;
					align-items: center;
					border-right: 1px solid @border-light-color;
					border-bottom: 1px solid @border-light-color;
					&.table-item-head {
						height: 60px;
						line-height: 30px;
						background: @bg-color;
						.detail-btn {
							cursor: pointer;
							color: @blue-color;
							&:hover {
								color: @blue-hover-color;
							}
						}
					}
				}
			}
		}
	}
	#paging {
		display: flex;
		margin: 0 20px;
		justify-content: flex-end;
	}
}
.account-model,
.cus-manager-model,
.group-manager-model,
.shop-manager-model {
	#paging {
		margin: 0 20px;
		display: flex;
		justify-content: flex-end;
	}
	.add-btn-wrapper {
		margin: 20px;
		display: flex;
		align-items: center;
		.import-cus-wrapper {
			position: relative;
			.import-cus-input {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 38px;
				opacity: 0;
			}
		}
		.download-template-btn {
			font-size: 0.875rem;
			color: @blue-color;
			cursor: pointer;
			margin-left: 10px;
		}
	}
	.table-wrapper {
		margin: 0 20px 0px 20px;
		.layui-table {
			.edit {
				color: @blue-color;
				cursor: pointer;
				&:hover {
					color: @blue-hover-color;
				}
			}
			.delete {
				color: @red-color;
				cursor: pointer;
				margin-left: 10px;
				&:hover {
					color: @red-hover-color;
				}
			}
			.use {
				color: @green-color;
			}
		}
	}
}
.group-manager-model {
	background: @bg-color;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	.add-btn-wrapper {
		margin-top: 0;
		padding-top: 20px;
	}
	.card-wrapper {
		display: flex;
		flex-wrap: wrap;
		padding: 0 20px;
		.layui-card:last-child {
			margin-bottom: 15px;
		}
		.layui-card {
			width: calc(100% / 4 - 15px);
			margin-left: 20px;
			&:nth-child(4n + 1) {
				margin-left: 0;
			}
			.layui-card-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.groupname {
					flex: 1;
					min-width: 0;
					color: @main-color;
					font-weight: 600;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
				.operation-wrapper {
					width: auto;
					flex: 0 0 auto;
					.edit {
						color: @blue-color;
						cursor: pointer;
						&:hover {
							color: @blue-hover-color;
						}
					}
					.delete {
						margin-left: 5px;
						color: @red-color;
						cursor: pointer;
						&:hover {
							color: @red-hover-color;
						}
					}
				}
			}
			.layui-card-body {
				.role-item {
					&.blue {
						color: @blue-color;
						font-weight: 600;
					}
				}
			}
		}
	}
}
#addUserModal,
#editUserModal,
#addShopModal {
	.layui-form {
		.modal-body {
			max-height: 400px;
			overflow-y: auto;
			.tips {
				color: @red-color;
				font-size: 0.75rem;
			}
			.layui-form-item {
				display: flex;
				.layui-form-label {
					width: auto;
					flex: 0 0 auto;
					padding-left: 0;
				}
				.layui-input-block {
					flex: 1;
					margin-left: 0px;
				}
			}
		}
	}
}
#addGroupModal,
#editGroupModal,
#editShopModal {
	.modal-body {
		max-height: 400px;
		overflow-y: auto;
		.tips {
			color: @red-color;
			font-size: 0.75rem;
		}
		.layui-form-item {
			display: flex;
			.layui-form-label {
				width: auto;
				flex: 0 0 auto;
				padding-left: 0;
			}
			.layui-input-block {
				flex: 1;
				margin-left: 0px;
			}
		}
	}
}
#fullPage {
	display: none;
	background: black;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 19930428;
}
#fullPage img {
	display: block;
	width: 100%;
}
#canvas {
	width: 100%;
	height: 100%;
	background: none;
	display: block;
}
#atMemberModal {
	.layui-input-block {
		display: flex;
		flex-direction: column;
		margin-left: 20px;
	}
}
#group-table {
	thead th {
		white-space: nowrap;
	}
	tbody td {
		white-space: nowrap;
		&.images{
			white-space: unset;
			.upload-img{
				width: 48px;
				margin-left: 2px;
			}
		}
	}
}
